<template>
  <section class="project-area">
    <div class="container-fluid p-0">
      <div class="row">
        <div class="col-lg-12">
          <div class="project-title text-center">
            <h3 class="title">作者介绍</h3>
          </div>
        </div>
      </div>
      <div class="row project-active">
        <swiper :options="swiperOptions">
          <swiper-slide>
            <div class="project-item mt-30">
              <div class="project-thumb">
                <img src="/assets/images/project-1.png" alt="projects" />
              </div>
              <div class="project-content">
                <a href="#"
                  ><span @click="$router.push('/authors')">司马相如</span></a
                >
                <p>代表作-《长门赋》、《大人赋》</p>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="project-item mt-30">
              <div class="project-thumb">
                <img src="/assets/images/project-2.png" alt="projects" />
              </div>
              <div class="project-content">
                <a href="#"
                  ><span @click="$router.push('/authors')">司马迁</span></a
                >
                <p>代表作-《史记》</p>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="project-item mt-30">
              <div class="project-thumb">
                <img src="/assets/images/project-3.png" alt="projects" />
              </div>
              <div class="project-content">
                <a href="#"
                  ><span @click="$router.push('/authors')">班固</span></a
                >
                <p>代表作-《汉书》、《白虎通义》</p>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="project-item mt-30">
              <div class="project-thumb">
                <img src="/assets/images/project-4.png" alt="projects" />
              </div>
              <div class="project-content">
                <a href="#"
                  ><span @click="$router.push('/authors')">张衡</span></a
                >
                <p>代表作-《二京赋》、《归田赋》</p>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="project-item mt-30">
              <div class="project-thumb">
                <img src="/assets/images/project-5.png" alt="projects" />
              </div>
              <div class="project-content">
                <a href="#"
                  ><span @click="$router.push('/authors')">苏轼</span></a
                >
                <p>代表作-《赤壁赋》</p>
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
  </section>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "ProjectArea",
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: 3,
        loop: true,
        speed: 1000,
        spaceBetween: 30,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true
        },
        // Responsive breakpoints
        breakpoints: {
          1024: {
            slidesPerView: 3
          },
          768: {
            slidesPerView: 2
          },
          640: {
            slidesPerView: 1
          },
          320: {
            slidesPerView: 1
          }
        }
      }
    };
  }
};
</script>

<style scoped></style>
